<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>



<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>青麦门店系统|商品规格设置</title>
<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
	name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />

<!-- ================== BEGIN BASE CSS STYLE ================== -->
<%@ include file="../include/inc_head.jsp"%>
<!-- ================== END BASE CSS STYLE ================== -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="/assets/plugins/pace/pace.min.js"></script>
<link href="/assets/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" />
<!-- ================== END BASE JS ================== -->
</head>
<body>
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in">
		<span class="spinner"></span>
	</div>
	<!-- end #page-loader -->

	<!-- begin #page-container -->
	<div id="page-container"
		class="fade page-sidebar-fixed page-header-fixed">
		<!-- begin #header -->
		<%@ include file="../include/inc_header.jsp"%>
		<!-- end #header -->

		<!-- begin #sidebar -->
		<%@ include file="../include/inc_left.jsp"%>
		<!-- end #sidebar -->

		<!-- begin #content -->
		<div id="content" class="content">
			<!-- begin breadcrumb -->
			<ol class="breadcrumb pull-right">
				<li><a href="javascript:;">首页</a></li>
				<li class="active">售卖商品复制</li>
			</ol>
			<!-- end breadcrumb -->
			<!-- begin page-header -->
			<h1 class="page-header">售卖商品复制</h1>
			<!-- end page-header -->

	<div class="panel panel-inverse">
				<div class="panel-heading">

					<h4 class="panel-title" style="color:#ffffff;">查询条件</h4>
				</div>
				<div class="panel-body">
					<form id="search-form" class="form-inline" method="POST">
						<div class="form-group m-r-10" >
					        
					        <select class="form-control" id="class1">
					               <option>---一级分类---</option>    
					        </select>
					        <select class="form-control" id="class2">
					               <option>---二级分类---</option>    
					        </select>
					        <select class="form-control" id="class3">
					               <option>---三级分类---</option>    
					        </select>
					        
					        <input type="hidden" class="form-control" name="class3Id" placeholder="三级分类id" />
					    </div>
						<div class="form-group m-r-10">
							<input type="text" class="form-control" name="skuName" placeholder="商品名称" />
						</div>
						<!-- <div class="form-group m-r-10">
							 <select class="form-control" name="tld">
							 		<option value="-1">商品状态</option>
									<option value="1">上架</option>
									<option value="2">下架</option>
                                      </select>
						</div> -->
						<div class="form-group m-r-10">
							<input type="text" class="form-control" readonly="readonly" name="startDate" id="startDate" placeholder="日期开始" />
                                    - <input type="text" class="form-control" readonly="readonly" name="endDate" id="endDate" placeholder="日期结束" />
						</div>
						<button type="button" class="btn btn-sm btn-warning m-r-5" onclick="doSearch();">查询</button>
						<!-- <button type="button" class="btn btn-sm btn-primary m-r-5" >批量复制</button> -->
					</form>
					
				</div>
			</div>
			<div class="panel panel-inverse">
				<div class="panel-body">
					<table id="data-table" class="table table-striped table-bordered " 
					data-options="iconCls: 'icon-edit',
					    singleSelect: true,
					    toolbar: '#tb'
					    
					   ">
						<tr>
						</tr>
					</table>
					<div id="tb" style="height:auto;padding-bottom:5px;padding-left:25px;">
					  
					  <a type='buttom' class='batchCopy btn btn-sm btn-warning m-r-5' onclick='batchCopy()'>批量复制</a>
					  <!-- <a type='buttom' class='allCopy btn btn-sm btn-warning m-r-5' onclick='allCopy()'>全部复制</a> -->
					 </div>
				</div>
			</div>
			
			<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
		            closed="true" buttons="#dlg-buttons">
		        <div class="ftitle">用户信息</div>
		        <form id="fm" method="post" novalidate>
		            <div class="fitem">
		                <label>姓名:</label>
		                <input name="name" class="easyui-validatebox" required="true">
		            </div>
		            
		        </form>
		    </div>
		    <div id="dlg-buttons">
		        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">提交</a>
		        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
		    </div>
		    
		    <!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width:1000px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							编辑商品
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-inline" action="/product/edit" method="POST">
							
							<input type="hidden" class="form-control" id="skuId" name="id" />
							
							<div class="form-group m-r-10">
								<label>sku名称:</label>
								<input type="text" class="form-control" readonly="readonly" id="skuName" name="skuName" />
							</div>
							
							<div class="control-group">
							    <label class="control-label"> </label>
							    <div class="controls">
							        <button id="add_lv1" class="btn btn-primary" type="button">添加规格项</button>
							        <button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button>
							    </div>
							</div>
							<div id="lv_table_con" class="control-group" style="display: none;">
							    <label class="control-label">规格项目表</label>
							    <div class="controls">
							        <div id="lv_table">
							            
							        </div>
							    </div>
							</div>
							
							
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary">
							提交更改
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->

		</div>
		<!-- end #content -->

		<%@ include file="../include/inc_footer.jsp"%>
		<!-- begin scroll to top btn -->
		<a href="javascript:;"
			class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
			data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
		<!-- end scroll to top btn -->
	</div>
	<!-- end page container -->

	<!-- ================== BEGIN BASE JS ================== -->
	<%@ include file="../include/inc_foot.jsp"%>

	<!-- ================== END BASE JS ================== -->

	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script src="/assets/plugins/DataTables/media/js/jquery.dataTables.js"></script>
	<script src="/assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js"></script>
	<script src="/assets/js/table-manage-default.demo.min.js"></script>
	<script src="/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
	<script src="/assets/plugins/bootstrap-datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="/assets/js/apps.min.js"></script>
	
	
	
	<link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/themes/gray/easyui.css">  
	<link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/themes/icon.css">  
	<!-- <link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/style.css">  
	<link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/demo.css">
	<link rel="stylesheet" type="text/css" href="/assets/jQueryEasyui/list.css"> -->
	<!-- <script type="text/javascript" src="/assets/jQueryEasyui/jquery-1.8.0.min.js"></script>  --> 
	<script type="text/javascript" src="/assets/jQueryEasyui/jquery.easyui.min.js"></script> 
	<script type="text/javascript" src="/assets/jQueryEasyui/easyui-lang-zh_CN.js"></script> 
	<!-- 三级联动 -->
	<script src="/assets/plugins/bootstrap-distpicker/distpicker.data.js"></script>
	<script src="/assets/plugins/bootstrap-distpicker/distpicker.js"></script>

	<!-- 规格设计 -->
	<script>
	    var lv1HTML = '<div class="control-group lv1">' +
	                    '<label class="control-label">规格名称</label>' +
	                    '<div class="controls">' +
	                        '<input type="text" name="lv1" placeholder="规格名称">' +
	                        '<button class="btn btn-primary add_lv2" type="button">添加参数</button>' +
	                        '<button class="btn btn-danger remove_lv1" type="button">删除规格</button>' +
	                    '</div>' +
	                    '<div class="controls lv2s"></div>' +
	                '</div>';
	    
	    var lv2HTML = '<div style="margin-top: 5px;">' +
	                    '<input type="text" name="lv2" placeholder="参数名称">' +
	                    '<button class="btn btn-danger remove_lv2" type="button">删除参数</button>' +
	                '</div>';
	     
	    $(document).ready(function() {
	        $('#add_lv1').on('click', function() {
	            var last = $('.control-group.lv1:last');
	            if (!last || last.length == 0) {
	                $(this).parents('.control-group').eq(0).after(lv1HTML);
	            } else {
	                last.after(lv1HTML);
	            }
	        });
	
	        $(document).on('click', '.remove_lv1', function() {
	            $(this).parents('.lv1').remove();
	        });
	
	        $(document).on('click', '.add_lv2', function() {
	            $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
	        });
	
	        $(document).on('click', '.remove_lv2', function() {
	            $(this).parent().remove();
	        });
	
	        $('#update_table').on('click', function() {
	            var lv1Arr = $('input[name="lv1"]');
	            if (!lv1Arr || lv1Arr.length == 0) {
	                $('#lv_table_con').hide();
	                $('#lv_table').html('');
	                return;
	            }
	            for (var i = 0; i < lv1Arr.length; i++) {
	                var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');
	                if (!lv2Arr || lv2Arr.length == 0) {
	                    alert('请先删除无参数的规格项！');
	                    return;
	                }
	            }
	
	            var tableHTML = '';
	            tableHTML += '<table class="table table-bordered">';
	            tableHTML += '    <thead>';
	            tableHTML += '        <tr>';
	            for (var i = 0; i < lv1Arr.length; i++) {
	                tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
	            }
	            tableHTML += '            <th width="20">现价</th>';
	            tableHTML += '            <th width="20">原价</th>';
	            tableHTML += '        </tr>';
	            tableHTML += '    </thead>';
	            tableHTML += '    <tbody>';
	             
	            var numsArr = new Array();
	            var idxArr = new Array();
	            for (var i = 0; i < lv1Arr.length; i++) {
	                numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length);
	                idxArr[i] = 0;
	            }
	             
	            var len = 1;
	            var rowsArr = new Array();
	            for (var i = 0; i < numsArr.length; i++) {
	                len = len * numsArr[i];
	                 
	                var tmpnum = 1;
	                for (var j = numsArr.length - 1; j > i; j--) {
	                    tmpnum = tmpnum * numsArr[j];
	                }
	                rowsArr.push(tmpnum);
	            }
	             
	            for (var i = 0; i < len; i++) {
	                tableHTML += '        <tr data-row="' + (i+1) + '">';
	                 
	                var name = '';
	                for (var j = 0; j < lv1Arr.length; j++) {
	                    var n = parseInt(i / rowsArr[j]);
	                    if (j == 0) {
	                    } else if (j == lv1Arr.length - 1) {
	                        n = idxArr[j];
	                        if (idxArr[j] + 1 >= numsArr[j]) {
	                            idxArr[j] = 0;
	                        } else {
	                            idxArr[j]++;
	                        }
	                    } else {
	                        var m = parseInt(i / rowsArr[j]);
	                        n = m % numsArr[j];
	                    }
	                     
	                    var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val();
	                    if (j != lv1Arr.length - 1) {
	                        name += text + '_';
	                    } else {
	                        name += text;
	                    }
	                     
	                    if (i % rowsArr[j] == 0) {
	                        tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
	                    }
	                }
	                 
	                tableHTML += '<td width="20"><input type="text" name="' + name + '[price]" /></td>';
	                tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
	                tableHTML += '</tr>';
	            }
	            tableHTML += '</tbody>';
	            tableHTML += '</table>';
	             
	            $('#lv_table_con').show();
	            $('#lv_table').html(tableHTML);
	        });
	    });
	</script>

	<script>	
	$(function() {
		$('#data-table')
				.datagrid(
						{
							title : '商品管理',
							loadMsg : '数据加载中,请稍后................',
							nowrap : true,
							striped : true,
							url : '/product/getProSsuList',
							pagination : true,
							rownumbers : true,
							singleSelect : false,
							border : true,
							pageSize : '10',
							columns : [ [
									{
										field : 'check',
										checkbox : true
									},
									{
										field : 'ssuCode',
										title : '商品编码',
										width :  200,
										align : 'center'
									},
									{
										field : 'ssuName',
										title : '商品名称',
										width :   170,
										align : 'center'
									},
									
									{
										field : 'ssuFormat',
										title : '商品规格',
										width :   170,
										align : 'center'
									},
									{
										field : 'ssuDesc',
										title : '商品描述',
										width :   170,
										align : 'center'
									},
									{
										field : 'uT',
										title : '最后修改时间',
										width :  100,
										align : 'center'
									},
									{
										field : 'ssuFp',
										title : '商品售卖规格',
										width :  120,
										align : 'center'
										
									},
									
									{
										field : 'tttt',
										title : '操作',
										width :  200,
										align : 'center',
										formatter : function(value, rec, index) {
											

										       /*  return [

										            '<a class="edit" onclick="operateEvent"  href="javascript:void(0)" title="edit">',
										            '<i class="glyphicon glyphicon-edit m-r-5"></i>',
										            '</a>',
										            '<a class="delete"  href="javascript:void(0)" title="delete">',
										            '<i class="glyphicon glyphicon-trash m-r-5"></i>',
										            '</a>'
										        ].join(''); */
										    
									        /* var str ="<a type='buttom' class='edit btn btn-sm btn-primary m-r-5' onclick='editRow("+JSON.stringify(rec)+")'>配置ssu</a>"+"" */
											
											var str ="<a type='buttom' class='copySsu btn btn-sm btn-warning m-r-5' onclick='copySsu("+JSON.stringify(rec)+",this)'>复制</a>"+"";
													 /* "<a type='buttom' class='btn btn-sm btn-warning m-r-5' href='${ctx}/product/delete?id="+rec.id+"'>删除</a>"; */
											return str;
										}
									} ] ]
						});
	 var p = $('#data-table').datagrid('getPager');
		$(p).pagination({
			pageSize : 10,
			pageList : [ 10, 20, 30 ]
		});  

		//获取活动分类
	});
	
	//批量复制
    function batchCopy(){
    	var selections= $('#data-table').datagrid('getSelections');
    	console.log("------------------");
    	console.log(selections);
        //调用批量复制接口
        $.ajax({
        	type : "POST",
            url : "${ctx}/product/batchCopySsu",
            data : JSON.stringify(selections),
            dataType: "json",
            contentType:"application/json", 
            success : function(data) {
            	console.log("----------------");
            	console.log(selections);
                if(data.code=="1"){
                	console.log("---批量复制成功---")
                	//$("#myModal").modal('hide');
                	$('#data-table').datagrid('reload');
                }
            },
            complete:function(){
                //请求完成的处理
            },
            error:function(){
                //请求出错处理
            }
        });
	}
	//全部复制
    function allCopy(){
    	var selections= $('#data-table').datagrid("getRows");
    	console.log("------------------");
    	console.log(selections);
        //调用导入sku接口
        $.ajax({
            url:"/assets/data/data.json",    //请求的url地址
            dataType:"json",   //返回格式为json
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            data:{"id":"value"},    //参数值
            type:"GET",   //请求方式
            beforeSend:function(){
                //请求前的处理
            },
            success:function(req){
                //请求成功时处理
                
            },
            complete:function(){
                //请求完成的处理
            },
            error:function(){
                //请求出错处理
            }
        });
	  }
	  
	
	function copySsu(o1,o2){
		console.log(o1);
    	var row = o1;
    	var that = o2;
    	console.log(that);
    	var array=[row];
    	console.log(array);
        //修改操作
		//alert('You click like action, row: ' + JSON.stringify(row));
		//console.log(row);
        //$("#myModal").modal('show');
        $('#skuId').val(row.id);
        $('#skuName').val(row.skuName);
        //调用复制ssu接口
        $.ajax({
        	type : "POST",
            url : "${ctx}/product/batchCopySsu",
            data : JSON.stringify(array),
            dataType: "json",
            contentType:"application/json", 
            success : function(data) {
            	console.log("----------------");
            	console.log(data);
                if(data.code=="1"){
                	console.log("---复制成功---")
                	//$("#myModal").modal('hide');
                	$('#data-table').datagrid('reload');
                }
            },
            complete:function(){
                //请求完成的处理
            },
            error:function(){
                //请求出错处理
            }
        });
	}
			//模态编辑
			function operateFormatter(value, row, index)
			//row 获取这行的值 ，index 获取索引值
			    {

			        return [

			            '<a class="edit"  href="javascript:void(0)" title="edit">',
			            '<i class="glyphicon glyphicon-edit"></i>',
			            '</a>'
			        ].join('');
			    }
			    function editRow(o) {
			    	console.log(o);
			    	var row = o;
		            //修改操作
					//alert('You click like action, row: ' + JSON.stringify(row));
					//console.log(row);
		            $("#myModal").modal('show');
		            $('#skuId').val(row.id);
		            $('#skuName').val(row.skuName);
		            $('#questiontypename').val(row.questiontypename);

		        }
			    
			  //模态增加
			    function openAddModal() {
			        $("#myModal").modal('show');
			        $('#sid').val(null);
			        $('#questiontype').val(null);
			        $('#questiontypename').val(null);
			    }
	
			var url;
			//新增
			/* function create(){
	            $('#dlg').dialog('open').dialog('setTitle','新增');
	            $('#fm').form('clear');
	            url = 'product/skuAdd?f=add';
	        } */
			//编辑
	        function edit(id){
	            var row = $('#data-table').datagrid('getSelected');
	            if (row){
	                $('#dlg').dialog('open').dialog('setTitle','修改');
	                $('#fm').form('load',row);
	                url = 'UserServlet?f=update&id=' + row.id;
	            }
	        }
			//保存
	        function save(){
	            $('#fm').form('submit',{
	                url: url,
	                onSubmit: function(){
	                    return $(this).form('validate');
	                },
	                success: function(result){
	                    var result = eval('('+result+')');
	                    if (result.success){
	                        $.messager.show({
	                            title: '提示',
	                            msg: result.message
	                        });
	                        $('#dlg').dialog('close');        // close the dialog
	                        $('#mTb').datagrid('reload');    // reload the user data
	                    } else {
	                        $.messager.show({
	                            title: '提示',
	                            msg: result.message
	                        });
	                    }
	                }
	            });
	        }
			//删除
	        function remove(){
	            var row = $('#mTb').datagrid('getSelected');
	            if (row){
	                $.messager.confirm('确认','您确定要删除吗？',function(r){
	                    if (r){
	                        $.post('UserServlet?f=delete',{id:row.id},function(result){
	                            if (result.success){
	                                $.messager.show({    // show error message
	                                        title: '提示',
	                                        msg: result.message
	                                    });
	                                $('#mTb').datagrid('reload');    // reload the user data
	                            } else {
	                                $.messager.show({    // show error message
	                                    title: '提示',
	                                    msg: result.message
	                                });
	                            }
	                        },'json');
	                    }
	                });
	            }
	        }
			
		//查询
	function doSearch() {
		var formData = $("#search-form").serializeArray();
		console.log(formData);
		$('#data-table').datagrid('reload', {
			class3Id:formData[0].value,
			skuName : formData[1].value,
			status:formData[2].value,
			startDate : formData[3].value,
			endDate : formData[4].value
		});
	}
	</script>
		<script>
		$(document).ready(function() {
			$("#startDate").datepicker({
		        format: 'yyyy-mm-dd',
		        language: "zh-CN",
		        keyboardNavigation: false,
		        forceParse: false,
		        calendarWeeks: false,
		        autoclose: true,
		    });
			$("#endDate").datepicker({
		        format: 'yyyy-mm-dd',
		        language: "zh-CN",
		        keyboardNavigation: false,
		        forceParse: false,
		        calendarWeeks: false,
		        autoclose: true,
		    });
			$("#startDate").on("changeDate",
		    function(e) {
		        $("#endDate").data("datepicker").setStartDate(e.date)
		    });
		    $("#endDate").on("changeDate",
		    function(e) {
		        $("#startDate").data("datepicker").setEndDate(e.date)
		    });

		}); 
		App.init();
		
		//分类的搜索
		$(function(){
			$("#class1").click(function(){
				console.log($("#class3").find("option:selected").attr("data-code"));
				$("input[name='class3Id']").val($("#class3").find("option:selected").attr("data-code"));
			});
			$("#class2").click(function(){
				console.log($("#class3").find("option:selected").attr("data-code"));
				$("input[name='class3Id']").val($("#class3").find("option:selected").attr("data-code"));
			});
			
			$("#class3").click(function(){
				console.log($("#class3").find("option:selected").attr("data-code"));
				$("input[name='class3Id']").val($("#class3").find("option:selected").attr("data-code"));
			})
		});
		
		//分类的三级联动
		$(function () {
				
			  'use strict';
				
			  var $distpicker = $('#distpicker');
				
			  $distpicker.distpicker('reset', true);
			  
			  $distpicker.distpicker({
			    province: '福建省',
			    city: '厦门市',
			    district: '思明区'
			  });

			  $('#reset').click(function () {
			    $distpicker.distpicker('reset');
			  });

			  $('#reset-deep').click(function () {
			    $distpicker.distpicker('reset', true);
			  });

			  $('#destroy').click(function () {
			    $distpicker.distpicker('destroy');
			  });

			  $('#distpicker1').distpicker();

			  $('#distpicker2').distpicker({
			    province: '---- 一级分类 ----',
			    city: '---- 二级分类 ----',
			    district: '---- 三级分类 ----'
			  });

			  $('#distpicker3').distpicker({
			    province: '浙江省',
			    city: '杭州市',
			    district: '西湖区'
			  });

			  $('#distpicker4').distpicker({
			    placeholder: false
			  });

			  $('#distpicker5').distpicker({
			    autoSelect: false
			  });

			});
		
		//easyui datagrid操作
		//编辑的行
		  var editIndex = undefined;
		  function endEditing() {
		   if (editIndex == undefined){return true}
		   $('#data-table').datagrid('endEdit', editIndex);
		   editIndex = undefined;
		   return true;
		  }
		   
		  function onClickCell(index, field){
		   if (editIndex != index) {
		    if (endEditing()) {
		     $('#data-table').datagrid('selectRow', index)
		       .datagrid('beginEdit', index);
		     var ed = $('#data-table').datagrid('getEditor', { index: index, field: field });
		     if (ed) {
		      ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
		     }
		     editIndex = index;
		    } else {
		     setTimeout(function () {
		      $('#data-table').datagrid('selectRow', editIndex);
		     }, 0);
		    }
		   }
		  }
		  
		  function onEndEdit(index, row){
		   var ed = $(this).datagrid('getEditor', {
		    index: index,
		    field: 'productid'
		   });
		   row.productname = $(ed.target).combobox('getText');
		  }
		  function append(){
		   var index = $('#data-table').datagrid('getRowIndex', $('#data-table').datagrid('getSelected'));
		   if (index == -1)
		    index = 0;
		   $("#data-table").datagrid("insertRow", {
		    index: index+1,
		    row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'}
		    });
		  }
		  function removeit(){
		   if (editIndex == undefined){return}
		   $('#data-table').datagrid('selectRow', editIndex);
		 
		    $('#data-table').datagrid('cancelEdit', editIndex)
		     .datagrid('deleteRow', editIndex);
		   editIndex = undefined;
		  }
		  function accept(){
		   if (endEditing()){
		    var $dg = $('#data-table');
		    var rows = $dg.datagrid('getChanges');
		    if (rows.length) {
		     var inserted = $dg.datagrid('getChanges', "inserted");
		     var deleted = $dg.datagrid('getChanges', "deleted");
		     var updated = $dg.datagrid('getChanges', "updated");
		     var effectRow = new Object();
		     if (inserted.length) {
		      effectRow["inserted"] = JSON.stringify(inserted);
		     }
		     if (deleted.length) {
		      effectRow["deleted"] = JSON.stringify(deleted);
		     }
		     if (updated.length) {
		      effectRow["updated"] = JSON.stringify(updated);
		     }
		     //alert(inserted);
		     //alert(deleted);
		     //alert(updated);
		    }
		   }
		   //$.post("/Home/Commit", effectRow, function (rsp) {
		   // if (rsp) {
		   //  $dg.datagrid('acceptChanges');
		   //  bindData();
		   // }
		   //}, "JSON").error(function () {
		   // $.messager.alert("提示", "提交错误了！");
		   //});
		  }
		  function reject(){
		   $('#data-table').datagrid('rejectChanges');
		   editIndex = undefined;
		  }
		  function getChanges(){
		   var rows = $('#data-table').datagrid('getChanges');
		   alert(rows.length+' rows are changed!');
		  }
		 
		  function contains(arr, obj) {
		   var i = arr.length;
		   while (i--) {
		    if (arr[i] === obj) {
		     return true;
		    }
		   }
		   return false;
		  }
	</script>
	<!-- 分类三级联动 -->
	<script type="text/javascript">
        $(function () {
            function Init(node) {
                return node.html("<option>---请选择---</option>");
            }
　　　　　　　//多维数组做数据来源
            var db = {
                腾讯: {
                    LOL: "德玛,EZ瑞尔,剑圣",
                    BNS: "气功师,力士,刺客,气宗师",
                    DNF:"A,B,C,D"
                },
                阿里巴巴: {
                    APPLAY: "AL,EZ瑞尔,剑圣",
                    HUABEI: "AL,力士,刺客,气宗师",
                    JIEBEI: "AL,B,C,D"
                },
                百度: {
                    ggs: "BD,EZ瑞尔,剑圣",
                    BD: "BD,力士,刺客,气宗师",
                    BDBD: "BD,B,C,D",
                }
            };
　　　　　　　　//初始化select节点
            $.each(db, function (changShang) {
                $("#selF").append("<option>" + changShang + "</option>");
            })
            //一级变动
            $("#selF").change(function () {
                //清空二三级
                Init($("#selB"));
                Init($("#selC"));
                $.each(db,function (cs,pps) {
                    if ($("#selF option:selected").text() == cs) {
                        $.each(pps, function (pp, xhs) {
                            $("#selB").append("<option>" + pp + "</option>");
                        });
                        $("#selB").change(function () {
                            Init($("#selC"));
                            $.each(pps, function (pp,xhs) {
                                if ($("#selB option:selected").text()==pp) {
                                    $.each(xhs.split(','), function () {
                                        $("#selC").append("<option>" + this + "</option>");
                                    })
                                }
                            })
                        })
                    }
                })
            })

        })
    </script>

</body>
</html>